<template>
  <div class="manager-container">
    <div class="manager-header">
      <div class="manager-header-left">
        <img src="@/assets/LogosDailydevIcon.svg" alt="" />
        <div class="title">蚂蚁搬家服务</div>
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/manager/manager_home' }"
          >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
              router.currentRoute.value.meta.name
            }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="manager-header-right">
        <el-dropdown style="cursor: pointer">
          <div style="padding-right: 20px; display: flex; align-items: center">
            <img
                style="width: 40px; height: 40px; border-radius: 50%"
                :src=userInfo.avatar
                alt=""
            />
            <span style="margin-left: 5px; color: white">{{
                userInfo.username
              }}</span>
            <el-icon color="#fff"><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')"
              >个人资料</el-dropdown-item
              >
              <el-dropdown-item @click="router.push('/manager/password')"
              >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click="userLogout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 下面部分开始 -->
    <div style="display: flex">
      <div class="manager-main-left">
        <el-menu
            :default-active="router.currentRoute.value.path"
            :default-openeds="['1', '2']"
            router
        >
          <el-menu-item index="/manager/manager_home">
            <el-icon><HomeFilled /></el-icon>
            <span>首页统计</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manager/order">订单信息</el-menu-item>


            <el-menu-item index="/manager/comment">评论信息</el-menu-item>

<!--            <el-menu-item index="/manager/sysNotice">系统公告</el-menu-item>-->
            <el-menu-item index="/manager/notice">公告信息</el-menu-item>
            <el-menu-item index="/manager/manager_team">团队信息</el-menu-item>
            <el-menu-item index="/manager/teamType">团队服务类型</el-menu-item>
            <el-menu-item index="/manager/priceRule">计费规则</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/teamEmp">员工管理</el-menu-item>
            <el-menu-item index="/manager/users">普通用户</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="manager-main-right">
        <RouterView />
      </div>
    </div>
    <!-- 下面部分结束 -->
  </div>
</template>

<script setup>
import { ref,reactive ,onMounted} from "vue";
import router from "@/router/index.js";
import {ArrowDown, HomeFilled,Menu} from "@element-plus/icons-vue";
import {logout} from "@/net/index.js";


const userInfo = JSON.parse(window.localStorage.getItem('user'))
function userLogout(){
  logout(()=>router.push('/'))
}

onMounted(() => {

})

</script>

<style scoped>
@import "@/assets/css/manager.css";
</style>
